<template>
	<div>
		<el-form :model="formData" :rules="rules" size="small" ref="formData" label-width="120px">
			<div style="width:400px;">
				<el-form-item label="原密码" prop="oldPwd">
				    <el-input type="password" v-model="formData.oldPwd"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="pwd">
				    <el-input type="password" v-model="formData.pwd" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="confirmPwd">
				    <el-input type="password" v-model="formData.confirmPwd" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item  style="width:70%; text-align: center;">
					<el-button type="primary" @click="submitForm('formData')">保存</el-button>
					<el-button @click="resetForm('formData')">重置</el-button>
				</el-form-item>
			</div>
		</el-form>
	</div>
</template>

<script>
  import { modifySysPwd } from '../../api/apis'
  export default {
    data() {
    	var checkOldPwd = (rule, value, callback) => {
	        if (!value) {
	          return callback(new Error('原密码不能为空'));
	        }
	        if (!value.length>16) {
	          return callback(new Error('原密码不能为空'));
	        }
	      };
	      var validatePwd = (rule, value, callback) => {
	        if (value === '') {
	          callback(new Error('请输入密码'));
	        }else if(value.length<6 || value.length>18){
				callback(new Error('密码长度在 6 到 18 个字符之间'));
	        }else {
	          if (this.formData.validateConfirmPwd !== '') {
	            	this.$refs.formData.validateField('confirmPwd');
	          }
	          callback();
	        }
	      };
	      var validateConfirmPwd = (rule, value, callback) => {
	        if (value === '') {
	          callback(new Error('请再次输入密码'));
	        } else if (value !== this.formData.pwd) {
	          callback(new Error('两次输入密码不一致!'));
	        } else {
	          callback();
	        }
	      };
      	return {
	        formData: {
	        	oldPwd: '',
         	 	pwd: '',
	          	confirmPwd: ''
	        },
	        rules: {
	        	oldPwd: [
		           	{ required: true, message: '请输入原密码', trigger: 'blur' },
		            { min: 6, max: 18, message: '密码长度在 6 到 18 个字符之间', trigger: 'blur' }
		        ],
		        pwd: [
		            { validator: validatePwd, trigger: 'blur' }
		        ],
		        confirmPwd: [
		            { validator: validateConfirmPwd, trigger: 'blur' }
		        ]
		       
	        }
	      };
	    },
	    methods: {
	    	submitForm(formData) {
				this.$refs[formData].validate((valid) => {
					if (valid) {
						let that = this;
						modifySysPwd(this.formData).then(function (res) {
							console.log(res)
							if(res.status === 200 ){
								if(res.data.code == 0){
									that.$message({
										type: 'success',
										message: '修改成功!'
									});
									that.$router.push({path: '/home'})
								}else{
									that.$message.error(res.data.msg)
								}
							}
						}) 
					} else {
						return false;
					}
				});
		    },resetForm(formName) {
		        this.$refs[formName].resetFields();
		    }
	    },
	    mounted(){
				 
		}
  }
</script>

<style type="text/css" scoped>
	.edit-form{	
		 width: 480px;
	}  
</style>
 